<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<meta name="author" content="xiaojiangK" />
		<meta name="email" content="740092856@qq.com" />
		<meta name="gitee" content="https://gitee.com/xiaojiangk/" />
		<meta name="viewport" content="width=1200, initial-scale=1.0" />
		<link rel="stylesheet" type="text/css" href="images/css/admin.min.css" />
		<link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
		<title>admin-input</title>
	</head>
	<body>
		<div class="demo-main">
			<div class="admim-title">
				<h2>input 输入框</h2>
				<p>通过鼠标或键盘输入字符</p>
			</div>
			<div class="item">
				<div class="title">
					<h3>基础用法</h3>
				</div>
				<div class="content">
					<qx-input name="name" placeholder="请输入内容" autofocus="true"></qx-input>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>禁用状态</h3>
				</div>
				<div class="content">
					<qx-input placeholder="请输入内容" disabled></qx-input>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>可清空</h3>
				</div>
				<div class="content">
					<qx-input placeholder="请输入内容" clearable></qx-input>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>密码框</h3>
				</div>
				<div class="content">
					<qx-input type="password" placeholder="请输入内容" show-pass></qx-input>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>文本域</h3>
				</div>
				<div class="content">
					<qx-input
						type="textarea"
						placeholder="请输入内容"
						rows="4"
						cols="40"
						resize="none"
					></qx-input>
					<qx-input type="textarea" placeholder="请输入内容" readonly></qx-input>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>尺寸</h3>
				</div>
				<div class="content">
					<qx-input placeholder="请输入内容" autocomplete="no"></qx-input>
					<qx-input placeholder="请输入内容" size="medium"></qx-input>
					<qx-input placeholder="请输入内容" size="small"></qx-input>
					<qx-input placeholder="请输入内容" size="mini"></qx-input>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>输入长度限制</h3>
				</div>
				<div class="content">
					<qx-input placeholder="请输入内容" show-word maxlength="10"></qx-input>
					<qx-input placeholder="请输入内容" type="textarea" show-word maxlength="100"></qx-input>
				</div>
			</div>
		</div>

		<div class="attributes">
			<h2>Input Attributes</h2>
			<table>
				<thead>
					<tr>
						<th>参数</th>
						<th>说明</th>
						<th>类型</th>
						<th>可选值</th>
						<th>默认值</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>type</td>
						<td>类型</td>
						<td>string</td>
						<td>
							text / textarea / password / color / date / datetime / datetime-local / email / month
							/ number / range / search / tel / time / url / week 原生属性
						</td>
						<td>text</td>
					</tr>
					<tr>
						<td>value</td>
						<td>input value值</td>
						<td>string / number</td>
						<td>—</td>
						<td>—</td>
					</tr>
					<tr>
						<td>size</td>
						<td>输入框尺寸</td>
						<td>string</td>
						<td>medium / small / mini</td>
						<td>—</td>
					</tr>
					<tr>
						<td>required</td>
						<td>必填选项</td>
						<td>string</td>
						<td>—</td>
						<td>—</td>
					</tr>
					<tr>
						<td>name</td>
						<td>原生 name 属性</td>
						<td>string</td>
						<td>—</td>
						<td>—</td>
					</tr>
					<tr>
						<td>rows</td>
						<td>输入框行数，只对 type="textarea" 有效</td>
						<td>number</td>
						<td>—</td>
						<td>3</td>
					</tr>
					<tr>
						<td>cols</td>
						<td>输入框列数，只对 type="textarea" 有效</td>
						<td>number</td>
						<td>—</td>
						<td>33</td>
					</tr>
					<tr>
						<td>autofocus</td>
						<td>原生属性，自动获取焦点</td>
						<td>boolean</td>
						<td>true, false</td>
						<td>—</td>
					</tr>
					<tr>
						<td>readonly</td>
						<td>原生属性，是否只读</td>
						<td>boolean</td>
						<td>—</td>
						<td>—</td>
					</tr>
					<tr>
						<td>autocomplete</td>
						<td>原生属性，自动补全</td>
						<td>string</td>
						<td>on, off</td>
						<td>off</td>
					</tr>
					<tr>
						<td>resize</td>
						<td>原生属性，控制是否能被用户缩放</td>
						<td>string</td>
						<td>none / both / horizontal / vertical</td>
						<td>—</td>
					</tr>
					<tr>
						<td>maxlength</td>
						<td>原生属性，最大输入长度</td>
						<td>number</td>
						<td>—</td>
						<td>—</td>
					</tr>
					<tr>
						<td>show-word</td>
						<td>是否显示输入字数统计</td>
						<td>boolean</td>
						<td>—</td>
						<td>false</td>
					</tr>
					<tr>
						<td>placeholder</td>
						<td>输入框占位文本</td>
						<td>string</td>
						<td>—</td>
						<td>—</td>
					</tr>
					<tr>
						<td>clearable</td>
						<td>是否可清空</td>
						<td>boolean</td>
						<td>—</td>
						<td>false</td>
					</tr>
					<tr>
						<td>show-pass</td>
						<td>是否显示切换密码图标</td>
						<td>boolean</td>
						<td>—</td>
						<td>false</td>
					</tr>
					<tr>
						<td>disabled</td>
						<td>是否禁用状态</td>
						<td>boolean</td>
						<td>—</td>
						<td>false</td>
					</tr>
				</tbody>
			</table>
			<h2>Input Events</h2>
			<table>
				<thead>
					<tr>
						<th>事件名称</th>
						<th>说明</th>
						<th>回调参数</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>change</td>
						<td>值变化时触发的事件</td>
						<td>输入的 Input value 值</td>
					</tr>
					<tr>
						<td>blur</td>
						<td>失去焦点时触发的事件</td>
						<td>输入的 Input value 值</td>
					</tr>
				</tbody>
			</table>
		</div>

		<script src="images/js/jquery.min.js"></script>
		<script src="images/js/admin.min.js"></script>
		<script>
			$(function () {
				$('.demo-main').input({
					change: function (val) {
						console.log(val)
					},
					blur: function (val) {
						console.log(val)
					}
				})
			})
		</script>
	</body>
</html>
